template(name="subtasks")
  h3.card-details-item-title
    | 🌐
    | {{_ 'subtasks'}}
  if currentUser.isBoardAdmin
    if toggleDeleteDialog.get
      .board-overlay#card-details-overlay
      +subtaskDeleteDialog(subtask = subtaskToDelete)

  .card-subtasks-items
    each subtask in currentCard.subtasks
      +subtaskDetail(subtask = subtask)

  if canModifyCard
    +inlinedForm(autoclose=false classNames="js-add-subtask" cardId = cardId)
      +addSubtaskItemForm
    else
      a.js-open-inlined-form(title="{{_ 'add-subtask'}}")
        | ➕

template(name="subtaskDetail")
  .js-subtasks.subtask
    +inlinedForm(classNames="js-edit-subtask-title" subtask = subtask)
      +editSubtaskItemForm(subtask = subtask)
    else
      .subtask-title
        span
        if canModifyCard
          a.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}")
        if canModifyCard
          h2.title.js-open-inlined-form.is-editable
            +viewer
              = subtask.title
        else
          h2.title
            +viewer
                = subtask.title

template(name="addSubtaskItemForm")
  textarea.js-add-subtask-item(rows='1' autofocus dir="auto")
  .edit-controls.clearfix
    button.primary.confirm.js-submit-add-subtask-item-form(type="submit") {{_ 'save'}}
    a.js-close-inlined-form

template(name="editSubtaskItemForm")
  textarea.js-edit-subtask-item(rows='1' autofocus dir="auto")
    if $eq type 'item'
      = item.title
    else
      = subtask.title
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-subtask-item-form(type="submit") {{_ 'save'}}
    a.js-close-inlined-form
    span(title=createdAt) {{ moment createdAt }}
    if canModifyCard
      if currentUser.isBoardAdmin
        a.js-delete-subtask-item {{_ "delete"}}...

template(name="subtasksItems")
  .subtasks-items.js-subtasks-items
    each item in subtasks.items
      +inlinedForm(classNames="js-edit-subtask-item" item = item subtasks = subtasks)
        +editSubtaskItemForm(type = 'item' item = item subtasks = subtasks)
      else
        +subtaskItemDetail(item = item subtasks = subtasks)
    if canModifyCard
      +inlinedForm(autoclose=false classNames="js-add-subtask-item" subtasks = subtasks dir="auto")
        +addSubtaskItemForm
      else
        a.add-subtask-item.js-open-inlined-form
          | ➕
          | {{_ 'add-subtask-item'}}...

template(name='subtaskItemDetail')
  .js-subtasks-item.subtasks-item
    if canModifyCard
      .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
      .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
        +viewer
          = item.title
    else
      .materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
      .item-title(class="{{#if item.isFinished }}is-checked{{/if}}")
        +viewer
          = item.title

template(name="subtaskDeletePopup")
  p {{_ 'confirm-subtask-delete-popup'}}
  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}

template(name="subtaskActionsPopup")
  ul.pop-over-list
    li
      a.js-view-subtask(title="{{ subtask.title }}")
        | 👁️
        | {{_ "view-it"}}
      if currentUser.isBoardAdmin
        a.js-delete-subtask.delete-subtask
          | 🗑️
          | {{_ "delete"}} ...

